<template>
    <el-row class="header_register" justify="space-between">
        <el-image style="width: auto; height: auto;" :src=imgUrl fit="none" @click="home" /><!-- 点击图片返回首页 -->
        <el-text style="color: white;font-size: xx-large; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
            padding: 8px 24px; border-radius: 12px; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);">
            注册
        </el-text>
    </el-row>
    <el-row type="flex" justify="center" style="align-content: center;height: 100%;margin-top: 2%"> <!-- 居中对齐 -->
        <el-form ref="ruleFormRef" style="width: 40%;" :model="ruleForm" :rules="rules" label-width="auto"
            :size="formSize" status-icon :label-position="labelPosition">
            <el-form-item label="昵称" prop="username"> <!-- 输入用户昵称 -->
                <el-input v-model="ruleForm.username" style="width: 100%" :rows="10" type="text" />
            </el-form-item>
            <el-form-item label="手机号码" prop="phone"><!-- 输入用户手机号 -->
                <el-input v-model="ruleForm.phone" style="width: 100%" :rows="1" :maxlength="11" :minlength="11" />
            </el-form-item>
            <el-form-item label="短信验证码" prop="code"><!-- 短信验证码输入 -->
                <el-input v-model="code" style="width: 30%" :rows="1" :maxlength="6" :minlength="6" />
                <el-link style="color: #667eea; margin-left: 5%;background-color: transparent; font-weight: 600;" :underline="false"
                    :disabled="isEnable" @click="getCodeClick">{{ getVerifyCode }}</el-link>
            </el-form-item>
            <el-form-item label="密码" prop="password"><!-- 密码输入 -->
                <el-input v-model="ruleForm.password" style="width: 100%" :rows="1" type="password" />
            </el-form-item>
            <el-form-item>
                <el-row style="width: 100%; align-content: center;margin-top: 5%;" justify="center">
                    <el-col :span="14">
                        <el-button style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
                            border: none; color: white; width: 100%;height: 40px; border-radius: 12px; 
                            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); font-weight: 600; font-size: large;"
                            @click="registerUser">注册</el-button>
                    </el-col><!-- 注册按钮 -->
                </el-row>
            </el-form-item>
        </el-form>
    </el-row>
    
    <!-- 短信验证码弹窗组件 -->
    <SmsCodeDialog 
        :visible="smsDialogVisible" 
        @update:visible="(val) => smsDialogVisible = val"
        :phone="ruleForm.phone" 
        @confirm="handleSmsCodeConfirm" 
    />
</template>

<script lang="ts" setup>
import router from '../router/index.ts';
import { reactive, ref } from 'vue'
import { ComponentSize, FormInstance, FormRules, FormProps, ElMessage } from 'element-plus'
import { imgUrl } from '../assets/common/Constants.ts';
import { userInfoStore } from '../assets/userStore/userStore.ts';
import { UserModel } from '../assets/models/User.ts';
import { agcApis } from '../assets/apis/AgcApis.ts';
import { userApis } from '../assets/apis/UserApis.ts';
import SmsCodeDialog from '../components/SmsCodeDialog.vue';


// 定义倒计时变量
let intervalId: any = -1;
const countdownSeconds = ref<number>(60);// 验证码倒计时
const getVerifyCode = ref<string>('获取验证码');
const isEnable = ref<boolean>(false);
const code = ref<string>(); // 存储验证码
const smsDialogVisible = ref<boolean>(false); // 控制短信验证码弹窗显示
const userStore = userInfoStore();
const labelPosition = ref<FormProps['labelPosition']>('top');// 表单标签位置
const formSize = ref<ComponentSize>('large');
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<UserModel>({
    id: '',
    username: '',
    password: '',
    phone: ''
});

const rules = reactive<FormRules<UserModel>>({
    id: [],
    username: [
        {
            required: true,
            message: '请输入您的昵称',
            trigger: 'change'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入您的密码',
            trigger: 'change',
        },
        {
            min: 8,
            max: 20,
            message: '密码长度为8-20位',
            trigger: 'blur'
        }
    ],
    phone: [
        {
            required: true,
            message: '请输入您的手机号码',
            trigger: 'change',
        }, {
            min: 11,
            max: 11,
            message: '请输入合法的手机号码',
            trigger: 'blur'
        }
    ]
});

const home = () => {
    router.replace({
        path: '/'
    })
};

const registerUser = () => {// 注册用户函数
    if (!ruleForm.username || !ruleForm.phone || !code.value || !ruleForm.password) {
        ElMessage.error('请填写完整的注册信息');
        return;
    }
    
    // 直接创建用户对象并跳转到首页
    const user: UserModel = {
        id: Date.now().toString(), // 生成临时ID
        username: ruleForm.username,
        phone: ruleForm.phone,
        password: ruleForm.password
    };
    
    // 更新用户信息并跳转
    userStore.update(user.id, user.username, user.phone, user.head_portrait, user.password);
    ElMessage.success('注册成功');
    router.push("/");
};

const getCodeClick = () => {// 获取验证码函数
    if (ruleForm.phone !== '') {
        // 直接显示验证码弹窗，不调用API
        smsDialogVisible.value = true
        
        // 开始倒计时
        isEnable.value = true
        intervalId = setInterval(() => {
            countdownSeconds.value--
            getVerifyCode.value = `${countdownSeconds.value}s`
            console.log(countdownSeconds);
            if (0 == countdownSeconds.value) {
                clearInterval(intervalId)
                isEnable.value = false
                countdownSeconds.value = 60
                getVerifyCode.value = '获取验证码'
            }
        }, 1000)
    } else {
        ElMessage.error('手机号码不能为空！')
    }
};

// 处理短信验证码确认
const handleSmsCodeConfirm = (verificationCode: string) => {
    // 自动填充验证码到输入框
    code.value = verificationCode;
    ElMessage.success('验证码已自动填充');
};
</script>


<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style scoped>
.header_register {
    width: 100%;
    height: 90px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
    position: relative;
}

.header_register::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10B981 0%, #06B6D4 50%, #10B981 100%);
}

/* 表单美化 */
:deep(.el-form) {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

:deep(.el-form-item__label) {
    color: #374151;
    font-weight: 600;
}

:deep(.el-input__wrapper) {
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

:deep(.el-input__wrapper:focus-within) {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
}

/* 按钮悬停效果 */
.el-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4) !important;
}

:deep(.el-link:hover) {
    color: #764ba2 !important;
}
</style>